<template>
    <a-form layout="inline">
        <a-form-item>
            <a-input v-model:value="userName" placeholder="请输入昵称搜索" allow-clear>
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="search">
                搜索
            </a-button>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="addAdmin">
                添加管理员
            </a-button>
        </a-form-item>
    </a-form>
    <br />
    <a-table :columns="columns" :data-source="userList" rowKey="userid">
        <template #bodyCell="{ column, record }">
            <!-- 头像 -->
            <template v-if="column.key === 'avatar'">
                <img v-if="record.avatar" style="width:40px;height:40px" :src="host + record.avatar" alt="">
                <span v-else>无</span>
            </template>
            <!-- 注册时间 -->
            <template v-if="column.key === 'registtime'">
                {{record.registtime && dayjs(record.registtime).format('YYYY-MM-DD HH:mm')}}
            </template>
            <!-- 角色 -->
            <template v-if="column.key === 'role'">
                {{record.role=='1'?'普通用户':'管理员'}}
            </template>
            <!-- 操作 -->
            <template v-if="column.key === 'edit'">
                <a-dropdown>
                    <template #overlay>
                        <a-menu @click="handleMenuClick($event,record)">
                            <a-menu-item key="1">
                                重置密码
                            </a-menu-item>
                            <a-menu-item key="2">
                                删除用户
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a>
                        操作
                        <DownOutlined />
                    </a>
                </a-dropdown>
            </template>
        </template>
    </a-table>
    <a-modal v-model:visible="visible" title="添加管理员" @ok="handleOk">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
            <a-form-item label="用户名" name="username"
                :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item label="密码" name="password"
                :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { onMounted, onActivated, reactive, ref } from "vue";
import { getUserList, updateUser, delUser,regist,host } from "@/api/index";
import { Modal, message } from "ant-design-vue";
import dayjs from "dayjs";
onMounted(() => {
    console.log("onMounted");
    getList();
});
const userList = ref([]);
const columns = reactive([
    {
        title: "ID",
        dataIndex: "userid",
        key: "userid",
    },
    {
        title: "昵称",
        dataIndex: "nickname",
        key: "nickname",
    },
    {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
    },
    {
        title: "角色",
        dataIndex: "role",
        key: "role",
    },
    {
        title: "注册时间",
        dataIndex: "registtime",
        key: "registtime",
    },
    {
        title: "操作",
        key: "edit",
    },
]);
async function getList() {
    const res = await getUserList();
    if (res.status === 200) {
        userList.value = res.data;
    }
}
// 操作
function handleMenuClick(e, record) {
    console.log(e, record);
    if (e.key === "1") {
        Modal.confirm({
            title: "提示",
            content: `你确定要为“${record.nickname}”重置密码吗？`,
            cancelText: "取消",
            okText: "确认",
            onOk() {
                console.log("重置密码");
                resetPassword(record);
            },
        });
    }
    if (e.key === "2") {
        Modal.confirm({
            title: "提示",
            content: `你确定要删除此用户吗？`,
            cancelText: "取消",
            okText: "确认",
            onOk() {
                deleteUser(record);
            },
        });
    }
}
// 重置密码
async function resetPassword(r) {
    let param = {
        userid: r.userid,
        nickname: r.nickname,
        password: "123456",
        avatar: r.avatar || "",
    };
    let res = await updateUser(param);
    console.log(res);
    if (res.data.code == 200) {
        message.success("重置密码成功");
    }
}
// 删除
async function deleteUser(r) {
    let res = await delUser({
        userid: r.userid,
    });
    console.log(res);
    if (res.data.code == 200) {
        message.success("删除成功");
        getList();
    }
}
// 搜索
const userName = ref("");
async function search() {
    let param = { nickname: userName.value };
    const res = await getUserList(param);
    if (res.status === 200) {
        userList.value = res.data;
    }
}

const visible = ref(false);
const formState = reactive({
  username:'',
  password:''
})
// 添加管理员
function addAdmin() {
    visible.value = true;
}
function handleOk() {
  console.log(formState)
  if(formState.username && formState.password){
    regist({
      nickName:formState.username,
      password:formState.password,
      role:'2'
    }).then(res=>{
      console.log(res);
      if(res.data.code===0){
        message.success('添加成功')
        visible.value = false
        getList()
      }else{
        message.warning(res.data.msg || '添加失败')
      }
    })
  }
}
</script>

<style>
</style>